﻿<%if not in_sdcms then response.write("template load fail"):response.end() end if%>
<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="{sdcms[seokey]}" />
<meta name="Description" content="{sdcms[seodesc]}" />
<title>{sdcms.iif(sdcms.strlen(seotitle)>0,seotitle,classname)}_{sdcms[webname]}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>var webroot="{webroot}",murl="list.asp?classid={classid}";</script>
<script src="{webroot}theme/default/style/js/jquery-1.11.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="{webroot}theme/default/style/css/font-awesome.css" type="text/css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/owl.carousel.css" media="screen" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/owl.theme.css" media="screen" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/bootstrap.3.2.0.css" type="text/css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/bootstrap-select.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/theme.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/theme-elements.css" type="text/css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/theme-animate.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/theme-shop.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/settings.css" media="screen" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/component.css" media="screen" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/bim.css" type="text/css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/custom.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/theme-responsive.css" />
<link rel="stylesheet" href="{webroot}theme/default/style/css/datepicker3.css" />
<link rel="stylesheet" href="{webroot}theme/default/css/other.css" />
<!--[if IE]>
        <link rel="stylesheet" href="{webroot}theme/default/style/css/ie.css">
    <![endif]-->
<!--[if lte IE 8]>
        <script src="{webroot}theme/default/style/js/respond.js"></script>
    <![endif]-->
<script src="{webroot}lib/js/jquery.js"></script>
<script src="{webroot}lib/js/jquery-migrate-1.1.0.min.js"></script>
<script src="{webroot}lib/tips/jquery.tips.js"></script>
<script src="{webroot}lib/js/base.js"></script>
<script src="{webroot}lib/validator/jquery.validator.js"></script>
<script src="{webroot}lib/validator/zh_CN.js"></script>
<script src="{webroot}theme/default/js/sdcms.js"></script>
<link href="{webroot}theme/default/style/css/WebResource.axd.css" rel="stylesheet" type="text/css" media="screen" />
<script src="{webroot}theme/default/style/js/fancyBox.js" type="text/javascript"></script>
</head>

<body>
<div class="body">
    {sdcms:include("../../sdcms_head.asp")}
   <div id="useragreement-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content"></div>
    </div>
  </div>
  <div id="privacy-policy-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content"></div>
    </div>
  </div>
  
<div id="content" style="display: none;" data-bind="visible: true">
    <div class="container">
        <div class="space10"></div>
        <div class="row">
            <div class="col-xs-12 col-md-3">
                <div class="search">
                    <div class="input-group input-group-sm">
                        <input name="freesearch" id="freesearch" type="text" class="form-control search" maxlength="100"
                               data-bind="value: filter.FreeText, event: { change: function() { filterChanged(); } }, enterPress: function() { $('#productsearchbutton').focus(); $('#freesearch').focus(); }"
                               placeholder="在此搜索...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" id="productsearchbutton" data-bind="click: function() { filterChanged(200); }">
                                <i class="icon icon-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-11 col-md-9 hidden-xs">
                <div class="space20 visible-xs visible-sm"></div>
                <div class="btn-group">
                    <div class="btn-group search-filter">
                        <select class="selectpicker" data-style="btn btn-primary btn-sm selectfirst" data-live-search="true"
                                data-active-class="dropdown-selected-blue"
                                data-bind="options: sources.ManufacturerSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '品牌', value: filter.Manufacturer, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    <div class="btn-group search-filter">
                        <select name="categoryFilter" class="selectpicker" data-style="btn btn-primary btn-sm selectmiddle" data-live-search="true"
                                data-active-class="dropdown-selected-blue"
                                data-bind="options: sources.CategorySource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'BIM 对象分类', value: filter.CategoryId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    <div class="btn-group search-filter">
                        <select class="selectpicker" data-style="btn btn-primary btn-sm selectmiddle" data-live-search="true"
                                data-active-class="dropdown-selected-blue"
                                data-bind="options: sources.MaterialSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '材料', value: filter.MaterialId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    <div class="btn-group search-filter">
                        <select class="selectpicker" data-style="btn btn-primary btn-sm selectmiddle" data-live-search="true"
                                data-active-class="dropdown-selected-blue"
                                data-bind="options: sources.BuildingTypeSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '构建类型', value: filter.BuildingTypeId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    <div class="btn-group search-filter">
                        <select class="selectpicker" data-style="btn btn-primary btn-sm selectlast" data-live-search="true"
                                data-active-class="dropdown-selected-blue"
                                data-bind="options: sources.FunctionalSpaceSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '功能空间', value: filter.FunctionalSpaceId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                </div>
            </div>
        </div>
        <div class="space5"></div>
        <div class="row">
            <div class="col-xs-8 col-sm-4 col-md-3">
                <div class="btn-toolbar pull-left" role="toolbar">
                    <div class="btn-group">
                        <button class="btn btn-default sort-source" id="btn-list" data-option-key="filter" type="button" data-toggle="tooltip" data-placement="bottom" data-container="body" title="列表视图"
                                data-bind="click: changeListStyle.bind($data, 'list'), css: { 'active': selectedListStyle() === 'list' }">
                            <span class="icon icon-bars"></span>
                        </button>
                        <button class="btn btn-default sort-source" id="btn-grid" data-option-key="filter" type="button" data-toggle="tooltip" data-placement="bottom" data-container="body" title="网格视图"
                                data-bind="click: changeListStyle.bind($data, 'grid'), css: { 'active': selectedListStyle() === 'grid' }">
                            <span class="icon icon-th"></span>
                        </button>
                    </div>
                    {if sdcms.is_login}                    <div class="btn-group">
                            <button class="btn btn-default sort-source" id="btn-heart" data-option-key="filter" type="button" data-toggle="tooltip" data-placement="bottom" data-container="body" title="您个人的收藏"
                                    data-bind="css: { 'redheart active': filter.MyBoard() }, click: toggleMyBoard">
                                <span class="icon icon-heart"></span>
                            </button>
                               
                        </div>
                     {/if}
                </div>
            </div>

            <div class="col-xs-4 col-sm-4 col-md-4">


                
                <a  class="btn btn-default btn-sm pull-right" data-container="body" data-toggle="tooltip" data-placement="bottom" title="移除所有过滤器和搜索结果"
                   data-bind="enable: isFilterActive(), css: { 'disabled': !isFilterActive() }, click: function() { filterReset(); filterChanged(10); }">
                    <i class="icon icon-times"></i> 重置过滤器
                </a>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-5">
                <div class="row">
                    <div class="space10 visible-xs"></div>
                    <div style="display:none">
                    <div class="col-xs-4 hidden-sm col-md-4 marginright1">
                        <select class="selectpicker form-control" data-style="btn btn-default btn-sm selectfirst selectlast"
                                data-active-class="dropdown-selected-grey"
                                data-bind="options: sources.ListOrderSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '最新添加', value: filter.ListOrder, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    </div>
                    <div class="col-xs-4 hidden-sm col-md-4 marginright1">
                        <select class="selectpicker form-control" data-style="btn btn-default btn-sm selectfirst selectlast"
                                data-active-class="dropdown-selected-grey"
                                data-bind="options: sources.ContentTypeSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '类型', value: filter.ContentTypeId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                    <div class="col-xs-4 col-sm-12 col-md-4 marginright1">
                        <select class="selectpicker form-control" data-style="btn btn-default btn-sm selectfirst selectlast"
                                data-active-class="dropdown-selected-grey"
                                data-bind="options: sources.FileTypeSource, optionsValue: 'Id', optionsText: 'Name', optionsCaption: '文件类型', value: filter.FileTypeId, event: { change: function() { filterChanged(); } }"></select>
                    </div>
                </div>
            </div>
        </div>

        <div class="space1"></div>
        <hr class="hr-xs" />
        <div class="space1"></div>

        <div class="row text-center" data-bind="if: !filter.MyBoard() && !filter.Board()">
            <div class="searchresults" id="searchresult_productcount_text">
                <span class="inverted" data-bind="text: numeral(searchResult.numberOfProducts()).format('#,0')"></span> 产品带有
                <span class="inverted" data-bind="text: numeral(searchResult.numberOfDownloads()).format('#,0')"></span> BIM 对象下载
                 <span class="inverted" data-bind="text: numeral(searchResult.numberOfManufacturers()).format('#,0')"></span> 真实生产商
            </div>
            <div class="space30"></div>
        </div>

        <div class="space1"></div>


        <!-- ko if: searchErrors().length > 0 -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger text-center">
                    <ul class="list-inline" data-bind="foreach: searchErrors">
                        <li data-bind="text: $data"></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /ko -->

    </div>

    <!-- ko if: selectedListStyle() === 'grid' -->
    <div class="horisontalpadding">
        <ul id="productovergrid_container" class="products product-thumb-info-list" data-sort-id="portfolio" data-bind="foreach: { data: searchResult.products, beforeRemove: hideProductElement }, runAfter: function() { $root.setWaypoint(); }">
            <li class="product searchproduct">
                <div class="portfolio-item img-thumbnail">
                    <a data-bind="attr: { href: $data.ManufacturerUrl, title: $data.ManufacturerName }"><img src="style/images/empty.gif" data-bind="attr: { src: $data.ManufacturerLogoUrl, alt: $data.ManufacturerName }" class="searchlogo" alt=""></a>
                    <a class="thumb-info" data-bind="attr: { href: $data.Url, title: $data.Name }">
                        <img src="style/images/empty.gif" data-bind="attr: { src: $data.ImageUrl }" class="product-image img-responsive" alt="">
                        <h2 class="product" data-bind="text: $root.dotdotdot($data.Name(), 30), attr: { title: $data.Name }">BIM product name</h2>
                    </a>
                    <a data-bind="attr: { href: $data.ManufacturerUrl, title: $data.ManufacturerName }">
                        <h4 class="product" data-bind="text: $data.ManufacturerName">Name of the manufacturer</h4>
                    </a>
                    <div class="preview-product" data-bind="if: $data.ProductStatus() == 'Preview' || $data.ManufacturerVisibility() == 'Hidden'">
                        <span class="icon-stack icon-lg" data-bind="visible: $data.ProductStatus() == 'Preview'">
                            <i class="icon icon-bookmark icon-stack-2x"></i>
                            <i class="icon icon-eye icon-stack-1x" title="这个产品处于预览模式"></i>
                        </span>
                        <span class="icon-stack icon-lg hidden-product" data-bind="visible: $data.ManufacturerVisibility() == 'Hidden'">
                            <i class="icon icon-bookmark icon-stack-2x"></i>
                            <i class="icon icon-lock icon-stack-1x" title="该产品是隐藏的"></i>
                        </span>
                        
                    </div>
                      {if sdcms.is_login}                    <div class="bimboard">
                            <a class="btn btn-default btn-xs heart" data-bind="
                                css: { 'text-danger': IsBoardElement() }, click: $root.toggleProductInBoard,
                                attr: { title: !IsBoardElement() ? '将此产品添加到您的 收藏' : '将此产品从您的 收藏 中移除' }">
                                <i class="icon icon-heart"></i> <span class="heart-like-text" data-bind="text: !IsBoardElement() ? '添加' : '移除'"></span>
                            </a>
                        </div>
                        {/if}
                </div>
            </li>
        </ul>
    </div>
    <!-- /ko -->
    <!-- ko if: selectedListStyle() === 'list' -->
    <div class="container minheight200">
        <div class="row">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th></th>
                             {if sdcms.is_login}  
                              <th></th>         
                             {/if}
                            <th>名称</th>
                            <th>产品组</th>
                            <th>厂家唯一识别号</th>
                            <th>品牌</th>
                            <th>BIM对象类别</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: { data: searchResult.products(), beforeRemove: hideProductElement }, runAfter: function() { $root.setWaypoint(); }">
                        <tr>
                          {if sdcms.is_login}                        <td>
                                    <a class="btn btn-default btn-xs heart" data-bind="css: { 'text-danger': IsBoardElement() }, click: $root.toggleProductInBoard" title="添加"><i class="icon icon-heart"></i></a>
                                </td>
                                {/if}
                            <td>
                                <a data-bind="attr: { href: $data.ImageUrl }, event: { mouseover: $root.showPreviewImage, mouseout: $root.hidePreviewImage }">
                                    <img src="style/images/empty.gif" class="img-listpreview" alt="" data-bind="attr: { src: $data.ImageThumbUrl }">
                                </a>
                            </td>
                            <td><a data-bind="attr: { href: $data.Url }, text: $data.Name" class="floatleft"></a> <div data-bind="visible: $data.ProductStatus == 'Preview'" class="floatleft">&nbsp;<i class="icon icon-circle text-warning" title="预览"></i></div></td>
                            <td data-bind="text: $data.ProductGroupName"></td>
                            <td data-bind="text: $data.SKU"></td>
                            <td data-bind="text: $data.ManufacturerName"></td>
                            <td data-bind="text: $data.CategoryName"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <div class="space30"></div>
    <div data-bind="visible: isProductsLoading">
        <div id="pager_loading"></div>
    </div>
    <!-- ko if: searchResult.products().length != 0 && !isProductsLoading() && hasNextPage() -->
    <div id="pager_container">
        <div class="container" style="display: none;">
            <div class="alert alert-info text-center">
                <a  data-bind="click: viewNextObjects">查看下一个 <span id="pagerNbrOfObjects"></span> 对象 <img src="style/images/moreproducts_arrow.png" alt="" /></a>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <div class="space30"></div>
    <div class="container"><div class="alert alert-info text-center" data-bind="visible: !hasNextPage()">已显示所有产品</div></div>
</div>
</div>


    <!-- Libs -->
    <script src="{webroot}theme/default/style/js/plugins.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.easing.js"></script>
    
    <script src="{webroot}theme/default/style/js/jquery.cookie.js"></script>

    <script src="{webroot}theme/default/style/js/bootstrap.min.3.2.0.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/tooltip.js"></script>
    
    <script type="text/javascript" src="{webroot}theme/default/style/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/bootstrap-datepicker.defaults.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.themepunch.tools.min.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.themepunch.revolution.js"></script>
    <script src="{webroot}theme/default/style/js/owl.carousel.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.flipshow.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.stellar.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.validate.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.isotope.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/task.js"></script>

    <script src="{webroot}theme/default/style/js/view.home.js"></script>
    <script src="{webroot}theme/default/style/js/theme.js"></script>
    <script src="{webroot}theme/default/style/js/custom.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/site.dialogues.js"></script>
    

    

    <script src="{webroot}theme/default/style/js/json2.js"></script>
    <script src="{webroot}theme/default/style/js/jquery.history.min.js"></script>

    <script type="text/javascript" src="{webroot}theme/default/style/js/knockout-3.1.0.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/knockout.mapping-latest.js"></script>
    <script type="text/javascript" src="{webroot}theme/default/style/js/knockout.custom.js"></script>

    <script src="{webroot}theme/default/style/js/modernizr.js"></script>
    <script src="{webroot}theme/default/style/js/bootstrap-select.min.js"></script>
    <script src="{webroot}theme/default/style/js/numeral.js"></script>
    <script src="{webroot}theme/default/style/js/waypoints.js"></script>

    <script type="text/javascript" src="{webroot}theme/default/style/js/site.product.index.js"></script>
    <script type="text/javascript">
        var vm = new ProductListViewModel();
        vm.filter = ko.mapping.fromJS({"ListOrder":"","FreeText":"","Manufacturer":{brandid},"ProductFamilyId":null,"ProductGroupId":null,"CategoryId":null,"MaterialId":null,"BuildingTypeId":null,"FunctionalSpaceId":null,"FileTypeId":null,"ContentTypeId":null,"MyBoard":false,"Board":null});
        vm.sources.ManufacturerSource = [{sdcms:rs field="id,my_Brand" table="sd_user" where="my_Brand<>''" order="id"  isadminurl="0"}{rs:eof}{"Id":"3m","Name":"3m"}{/rs:eof}{if i<>1},{/if}{"Id":"{$rs[id]}","Name":"{$rs[my_Brand]}"}{/sdcms:rs}];
        vm.sources.CategorySource = [{sdcms.get_dimlistvalue("categoryId")}];
        vm.sources.MaterialSource = [{sdcms.get_dimlistvalue("MaterialId")}];
        vm.sources.BuildingTypeSource = [{sdcms.get_dimlistvalue("BuildingTypeId")}];
        vm.sources.FunctionalSpaceSource = [{sdcms.get_dimlistvalue("FunctionalSpaceId")}];
        vm.sources.FileTypeSource = [{sdcms.get_dimlistvalue("FileTypeId")}];
        vm.sources.ContentTypeSource = [{sdcms.get_dimlistvalue("ContentTypeId")}];
        vm.sources.ListOrderSource = [{"Id":"productname","Name":"产品名"},{"Id":"brandname","Name":"品牌"},{"Id":"productsku","Name":"产品SKU"}];
        vm.init();
        ko.applyBindings(vm, $('#content')[0]);

        //get first page
        vm.refreshProducts(vm.actualskip);

        //it sets up the active css class
        var setDropDownBackground = function(selectElement) {

            var element = $(selectElement);
            var className = element.data('active-class');
            var nextButton = element.next('div').children('button').first();

            if (nextButton.length > 0) {
                if (element.val()) {
                    nextButton.addClass(className);
                } else {
                    nextButton.removeClass(className);
                }
            }

        };

        $(document).ready(function() {

            $('select.selectpicker').selectpicker();
            $('select.selectpicker').change(function() {
                setDropDownBackground(this);
            });

            //init dropdowns
            $('select.selectpicker').each(function(key, value) {
                setDropDownBackground(value);
            });

        });
    </script>

</body>
</html>